import { NavLink, Route, Switch } from 'react-router-dom'
import Home from './views/Home'
import RenderDom from './views/RenderDom'
import MemoAndCallbackDemo from './views/MemoAndCallbackDemo'
import MyBigList from './views/MyBigList'
import ReduceDemo from './views/ReduceDemo'
import Stopwatch from './views/Stopwatch'
import TodoApp from './views/TodoApp'
import ListReducer from './views/ListReducer'
import UseLogin from './views/UseLogin'
import List from'./views/List'
import  ContextDemo from './context/ContextDemo'
import CarsDemo from './views/CarsDemo'
import UserApp from './views/UserApp'
import AuthDemo from './views/AuthDemo'
import CarouselDemo from'./views/CarouselDemo'
import Carindex from'./component/cart/Carindex'
const routes = [
  {
    path: '/',
    text: '首页',
    exact: true,
    component:Home
  },{
    path:'/render-explain',
    text:'渲染测试',
    exact:true,
    component:RenderDom
  },{
    path:'/memo-callback',
    text:'memo-callback',
    component:MemoAndCallbackDemo
  },
  {
    path:'/big-List',
    text:'MyBigListDemo',
    component:MyBigList
  },
  {
    path:'/reduce',
    text:'ReduceDeme',
    component:ReduceDemo
  },
  {
    path:'/stop',
    text:'计时器',
    component:Stopwatch
  }
,{
  path:'/todo',
  text:'Todo',
  component:TodoApp
  
},
{
  path:'/list',
  text:'List',
  component:ListReducer
},
{
  path:'/login',
  text:'登陆',
  component:UseLogin
},
{path:'/listtow',
 text:'List1',
 component:List
},{
  path:'/context',
  text:"上下文",
  component:ContextDemo
},{
  path:'/cars',
  text:'汽车',
  component:CarsDemo
},{
  path:"/useapp",
  text:'App',
  component:UserApp
},
{
  path:'/auth',
  text:'AuthDemo',
  component:AuthDemo
},{
  path:'/caro',
  text:'轮播图',
  component:CarouselDemo
},
{
  path:'/car',
  text:'购物车',
  component:Carindex
},

]

export default routes

export const makeRoutes = (routes, parentPath = '') => {
  return routes.map(({ component: View, subRoutes, path, ...route }) => {
    const currentPath = parentPath + path
    return (
      <Route key={currentPath} path={currentPath} {...route}>
        <Switch>
          {subRoutes && makeRoutes(subRoutes, currentPath)}
          <Route path={currentPath}>
            <View />
          </Route>
        </Switch>
      </Route>
    )
  })
}

export const makeNavLinks = (routes, parentPath = '') => {
  return (
    <ul>
      {routes.map(({ text, path, subRoutes }) => {
        const currentPath = parentPath + path
        return (
          <li key={currentPath}>
            <NavLink to={currentPath} exact>
              {text}
            </NavLink>
            {subRoutes && makeNavLinks(subRoutes, currentPath)}
          </li>
        )
      })}
    </ul>
  )
}
